import React from "react"
import { useNavigate } from "react-router-dom"
import { Button, Form, Input, App } from "antd"
import { UserOutlined, LockOutlined } from "@ant-design/icons"
import { login } from "@/apis/login"
import styles from "./index.module.less"
import userInfoStore from "@/store/userInfo/index"
const Login = () => {
  const { message } = App.useApp()
  const navigate = useNavigate()
  const { updateInfo } = userInfoStore()
  const onFinish = async (values) => {
    const res = await login({ ...values })
    if (res.code == 200) {
      updateInfo({
        token: res.token
      })
      navigate("/")
      message.success("登录成功")
    }
  }
  return (
    <>
      <div className={styles.wrap}>
        <div className={styles.container}>
          <section></section>
          <main>
            <h2>请登录您的账号</h2>
            <Form layout="vertical" onFinish={onFinish} autoComplete="off" requiredMark={false}>
              <Form.Item
                label="账号"
                name="username"
                initialValue="admin"
                rules={[
                  {
                    required: true,
                    message: "请输入用户名!"
                  }
                ]}
              >
                <Input size="large" prefix={<UserOutlined />} />
              </Form.Item>
              <Form.Item
                label="密码"
                name="password"
                initialValue="admin123"
                rules={[
                  {
                    required: true,
                    message: "请输入密码!"
                  }
                ]}
              >
                <Input.Password
                  onPressEnter={() => {
                    onFinish()
                  }}
                  size="large"
                  prefix={<LockOutlined />}
                />
              </Form.Item>
              <Form.Item>
                <Button className="mt-10px" type="primary" size="large" htmlType="submit" block>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </main>
        </div>
      </div>
    </>
  )
}
export default Login
